<script setup lang="ts">
const props = withDefaults(defineProps<{
  prize: number;
  radius: number;
  keyPoint: number;
}>(), {
});

const radius = computed(() => props.radius); // 半径
const centerPoint = ref([0, 0]);
const Canvas = ref<HTMLCanvasElement | undefined>(undefined);
const colorArray = [
  {
    color: '#E52A34',
    color1: '#E33C46',
    angle: '170deg',
    start: 0.29,
    end: 73.92,
  },
  {
    color: '#F1424C',
    color1: '#E52731',
    angle: '47deg',
    start: 34.07,
    end: 88.31,
  },
  {
    color: '#E8267B',
    color1: '#CF1F29',
    angle: '80deg',
    start: 33.23,
    end: 84.23,
  },
  {
    color: '#D82070',
    color1: '#E63F7E',
    angle: '16deg',
    start: 0.39,
    end: 75.66,
  },
  {
    color: '#DC5056',
    color1: '#EF488C',
    angle: '226deg',
    start: 37.31,
    end: 64.38,
  },
  {
    color: '#DC585C',
    color1: '#EC666B',
    angle: '248deg',
    start: 12.57,
    end: 60.6,
  },
  {
    color: '#EF7959',
    color1: '#DB585A',
    angle: '294deg',
    start: 35.95,
    end: 90.18,
  },
  {
    color: '#F4825A',
    color1: '#EE7547',
    angle: '137deg',
    start: 33.73,
    end: 65.9,
  },
  {
    color: '#ED7746',
    color1: '#F25C30',
    angle: '155deg',
    start: 36.53,
    end: 83.88,
  },
  {
    color: '#F35B2F',
    color1: '#E95126',
    angle: '196deg',
    start: 5.55,
    end: 67.21,
  },
  {
    color: '#E75125',
    color1: '#E74521',
    angle: '223deg',
    start: 30.99,
    end: 67.77,
  },
];
colorArray.splice(props.keyPoint, 0, { color: '#779549', color1: '#02B5F4', angle: '170deg', start: 4.02, end: 85.03 });
// 监听
watchEffect(() => {
  if (props.prize === 0 || props.radius <= 0)
    return;
  draw();
  // 设置大奖背景色
  setTimeout(() => {
    draw();
  }, 200);
});

function draw() {
  const centerX = (Canvas.value?.width ?? 0) / 2;
  const centerY = (Canvas.value?.height ?? 0) / 2;
  const adjustedRadius = radius.value - 1; // 减去线宽的宽度
  // 获取到圆心位置
  centerPoint.value = [centerX, centerY];
  const ctx = Canvas.value?.getContext('2d');
  if (!ctx)
    return;
  ctx?.arc(centerX, centerY, radius.value, 0, 2 * Math.PI);

  // 绘制每一个分段渐变色
  colorArray.forEach((colorObj, index) => {
    if (props.prize < 12 && index >= props.prize)
      return;
    const { startAngle, endAngle } = calculateAngles(index, props.prize);
    // 计算每个分段的中心角度
    const midAngle = (startAngle + endAngle) / 2;
    // 创建从圆心到分割中心的渐变
    const gradient = ctx?.createLinearGradient(
      centerX,
      centerY,
      centerX + Math.cos(midAngle) * adjustedRadius,
      centerY + Math.sin(midAngle) * adjustedRadius,
    );

    gradient?.addColorStop(colorObj.start / 100, colorObj.color);
    gradient?.addColorStop(colorObj.end / 100, colorObj.color1);

    ctx?.beginPath();
    ctx?.moveTo(centerX, centerY);
    ctx?.arc(centerX, centerY, adjustedRadius, startAngle, endAngle);
    ctx?.closePath();
    ctx.fillStyle = gradient;
    ctx?.fill();
  });

  // 绘制 12 等份的分割线
  ctx!.lineWidth = 2; // 设置线宽为 2px
  ctx!.strokeStyle = '#270204'; // 设置线条颜色为黑色
  for (let i = 0; i < props.prize; i++) {
    const angle = (i * 2 * Math.PI) / props.prize;
    const x1 = centerX;
    const y1 = centerY;
    const x2 = centerX + adjustedRadius * Math.cos(angle + (2 * Math.PI) / props.prize);
    const y2 = centerY + adjustedRadius * Math.sin(angle + (2 * Math.PI) / props.prize);
    // 绘制带有阴影的线条
    ctx!.shadowColor = 'rgba(60,60,60,0.59)';
    ctx!.shadowOffsetX = 0;
    ctx!.shadowOffsetY = 0;
    ctx!.shadowBlur = 1;

    ctx?.beginPath();
    ctx?.moveTo(x1, y1);
    ctx?.lineTo(x2, y2);
    ctx?.stroke();
  }
}

// 计算每份的开始角度和结束角度
function calculateAngles(segmentIndex: number, totalSegments: number) {
  const startAngle = (segmentIndex * 2 * Math.PI) / totalSegments;
  const endAngle = ((segmentIndex + 1) * 2 * Math.PI) / totalSegments;
  return { startAngle, endAngle };
}
</script>

<template>
  <div class="main relative">
    <!-- 阴影圆环 -->
    <div class="absolute rounded-50% ring" :style="`width: ${radius * 2}px;height: ${radius * 2}px;`" />
    <canvas v-if="radius > 0" ref="Canvas" :width="(radius) * 2" :height="(radius) * 2" style="display: block" />
  </div>
</template>

<style scoped lang="scss">
.ring {
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.13) inset;
}
</style>
